@use '../variables';

$block: '.#{variables.$ns}list';

#{$block} {
    --_--item-padding: var(--g-list-item-padding, 0);

    outline: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;

    &__filter {
        padding: var(--_--item-padding);
        margin-block-end: 8px;
        flex: 0 0 auto;
    }

    &__items {
        flex: 1 1 auto;
    }

    &__item,
    &__empty-placeholder {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: var(--_--item-padding);
        user-select: none;
        overflow: hidden;
    }

    &__item {
        &_active {
            background: var(--g-color-base-simple-hover);
        }

        &_selected {
            background: var(--g-color-base-selection);

            &:hover {
                background: var(--g-color-base-selection-hover);
            }
        }

        &_sort-handle-align_right {
            flex-direction: row-reverse;

            #{$block}__item-sort-icon {
                margin-inline: 10px 0;
            }
        }

        // https://github.com/hello-pangea/dnd/blob/master/docs/guides/preset-styles.md#phase-dragging-droppable-element
        &_sortable[data-rbd-drag-handle-context-id]:active {
            cursor: grabbing;
        }

        &_dragging {
            background: var(--g-color-base-simple-hover-solid);
            z-index: 100001;
        }
    }

    &__empty-placeholder {
        box-sizing: border-box;
        color: var(--g-color-text-hint);
        min-height: 36px;
        padding-block: 8px;
    }

    &__item-content {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;
    }

    &__item-sort-icon {
        $icon-width: 12px;
        $space-from-edge: 16px;

        display: flex;
        align-items: center;
        width: $icon-width;
        margin-inline-end: $space-from-edge - $icon-width;
        flex: 0 0 auto;
        color: var(--g-color-text-hint);
    }

    &__loading-indicator {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
}
